1

学习HTML一个月了,对HTML和Css页面的静态布局进行一次总结

总体来说静态页面布局分为两大类,水平布局和垂直布局,只要水平布局和垂直布局都能熟悉了,
那么对于静态的页面的布局就不会有太大的问题
再说布局之前先说一下元素的显示模式分类。
    元素的显示模式分类可以分为块级元素,行内元素,行内块级元素。
    块级元素是垂直排列的,每个元素会独占一行,行内元素和行内块级元素不会独占一行,会水平排列。
    当然元素的显示模式是可以随便转换的。
下面先来说说垂直布局,
    垂直布局让元素在页面里面垂直排列,这个是比较简单的,我们知道在正常情况下页面里的
    块级元素都是从上到下依次排列的,那么这个垂直布局就相对来说简单点。只要把块级元素依次写在页面中,
    那么浏览器会默认的让这些块级元素垂直排列,如果有行内块级元素或行内元素
    则可以转化为块级元素来实现元素的垂直排列。
然后是来说水平布局,
    水平布局就是让元素在页面里面水平排列,这个比较垂直排列会相对复杂一些,因为水平排列会涉及到浮动,
    因此会出现很多问题,比如高度塌陷,覆盖等。而且一般都是通过浮动来实现水平布局,所以会遇到很多问题,
    这就要求我们对浮动有一定的了解,下面我会写一些布局的细节以及浮动的各种情况。
    首先最常用的就是居中显示,各种居中方式中我们最常用的就是text-align:center , 
    text-align:center可以让下面几种情况居中:
       可以让该元素的文本内容水平居中,该元素中的行内元素和行内块级元素,
       但是不能让元素内部的块级元素水平居中
       垂直居中,用的最多的是让line-height=元素的height,还有vertical-align,
       也是垂直对齐,他一般是让图片右边的文本对齐图片的上中下。
    然后用的多的就是内外边距了,就是margin和padding,很好的理解和运用内外边距能够
    让你很方便的实现开头或结尾的一些距离等。
     然后就是定位了,页面布局的定位最常用的就是浮动(float)和定位(position),
     感兴趣的可以去我的日记了有详细的介绍。
     本人学习前段一个月,完全的菜鸟,希望大家多多指点。
        

前端阶的小菜鸟
4 声望0 粉丝